<template>
  <div class="login">
    <div class="title">已识别出以下企微账号，请选择要监控的企微账号：</div>
    <div class="account-list">
      <AccountList ref="accountListRef" v-model="selectAccountId" @submit="getSelectUserInfo" @do-login="doLogin" />
    </div>
    <div class="btns">
      <div class="left">
        <el-button :loading="addAccountLoading" @click="addAccountFn">添加账号</el-button>
      </div>
      <div class="right">
        <el-button @click="reset">重新识别</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" :title="dialogTitle" @close="closeDialog">
    <div class="dialog-box">
      <img :src="qrCode" alt="">
    </div>
  </el-dialog>

  <el-dialog v-model="dialogAccountVisible" width="680px" title="个人信息" @close="closeDialogAccount">
    <div class="dialog-user-box" v-if="corpLogo || avatorUrl || nickName">
      <div>
        <img class="corp-logo-img" v-if="corpLogo" :src="corpLogo" alt="" />
      </div>
      <div>
        <img class="avator-img" v-if="avatorUrl" :src="avatorUrl" alt="" />
      </div>
      <div class="nick-name" v-if="nickName">
        <span>{{nickName}}</span>
      </div>
    </div>
    <div v-if="isAuthCode" class="authcode">
        <span>验证码:</span>
        <el-input v-model.trim="authCode" :maxlength="6" :minlength="6" placeholder="请输入6位数字的验证码" @keydown.enter="submitAuthCode" />
        <el-button type="primary" @click="submitAuthCode" >确定</el-button>
    </div>
  </el-dialog>

  <el-dialog v-model="dialogSync" width="30%" title="提示">
    <div class="dialog-sync-text">
      该账号未同步企微数据，是否立即同步
    </div>
    <template #footer>
      <el-button @click="dialogSyncFn('2')">取 消</el-button>
      <el-button type="primary" @click="dialogSyncFn('1')">同 步</el-button>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import QrcodeVue from 'qrcode.vue'
import { useStore } from '../../store/index'
import AccountList from './components/AccountList.vue'
import {addAccount, getImageUrl} from '../../ajax/api/login'
import { getSystemSync } from '../../ajax/api/common'
import { useSignalR } from '../../utils/ws'
import useAddAccount from '../../hooks/addAccountSocket'



const store = useStore()
const route = useRoute()
const router = useRouter()

const accountListRef = ref<any>(null)
let selectAccountId = ref<string>('')
let qrSize = ref<number>(300)
const dialogSync = ref<any>(false)
const selectUserInfo = ref<any>({})

let signalr: any = ''

const startWorkUser = (val) => {
  signalr.invoke('WorkuserInit', {
    userList: [val]
  })
  signalr.on('workuserState', (data) => {
    if(data.type === 2) {
      store.commit('common/USERID', '')
      router.push({path: '/login'})
    }
  })
}

let {
  addAccountFn,
  closeDialog,
  closeDialogAccount,
  qrCode,
  dialogTitle,
  addAccountLoading,
  dialogTableVisible,
  dialogAccountVisible,
  userInfo,
  corpLogo,
  avatorUrl,
  nickName,
  authCode,
  isAuthCode,
  submitAuthCode
} = useAddAccount((flag:boolean)=>{
  if(flag){
    reset()
  }
})

const reset = () => {
  selectAccountId.value = ''
  dialogTitle.value = '添加账号'
  store.commit('common/USERID', '')
  accountListRef.value.init()
}

const getSelectUserInfo = (val) => {
  selectUserInfo.value = {...val}
}

const dialogSyncFn = async (type: string) => {
  store.commit('common/USERID', selectAccountId.value)
  if(type == '1') {
    store.commit('common/SETISSYNC', true)
  }
  router.push({path: '/home'})
  // if(type == '1') { 
  //   // await getSystemSync()
  // }
}

const save = () => {
  if(!!selectAccountId.value){
    signalr = useSignalR({
      url: 'ws/aggregate-chat/workuser',
      onStart() {
        startWorkUser(selectAccountId.value)
      }
    })
    store.commit('common/SETISSYNC', null)
    if(!selectUserInfo.value.hasSyncExternalDataByAfterLogined) {
      dialogSync.value = true
    }else {
      store.commit('common/USERID', selectAccountId.value)
      router.push({path: '/home'})
    }
  }else{
    ElMessage.warning('请选择账号')
  }
}

const doLogin = () => {
  dialogTitle.value = '账号登录'
  dialogTableVisible.value = true
}

</script>

<style scoped lang="scss">
  .login{
    width: 900px;
    height: 640px;
    background-color: #fff;
    box-shadow: 0 0 100px 0 #e9e9e9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    margin-top: 10px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    .title{

    }
    .account-list{
      // flex: 1;
    }
    .btns{
      height: 100px;
      // flex: 1;
      // background-color: navy;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{

      }
      .right{

      }
    }
  }

  .el-dialog{
    .dialog-box{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      img{
        width: 300px;
        height: 300px;
      }
    }
    .authcode {
        margin: 32px 16px 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 0 120px;
        gap: 20px;
        .el-input {
            flex: 1;
        }
    }
    .dialog-user-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .corp-logo-img {
        height: 60px;
      }
      .avator-img{
        margin-top: 20px;
        width: 60px;
        height: 60px;
        border-radius: 12px;
        // margin-right: 20px;
      }
      .nick-name {
        margin-top: 20px;
        text-align: center;
      }
      span{
        color: #666;
      }
      
    }
  }
  .dialog-sync-text {
    margin: 14px 0;
  }
</style>
